import React from 'react';
import { FormPro } from '@/components';
import { imgRegExp } from '@/utils/regExp';
import { FormInstance } from 'antd/lib/form';
import { CloneProps } from '@/components/ModalPro';
import { FormItem } from '@/components/FormPro/types';

import api from '@/service/api';

type Props = CloneProps & {
  onSuccess(): any;
}

class Edit extends React.PureComponent<Props> {
  static defaultProps = {
    onSuccess: () => null
  }

  form = React.createRef<FormInstance>();

  componentDidMount() {
    this.props?.listenOk?.(this.onSubmit);
  }

  /*
  * 提交数据
  * */
  private onSubmit = async () => {
    const fields = await this.form.current?.validateFields();
    api.post('/api/create/own/app',fields);
  }

  render() {
    const formList: FormItem[] = [
      {
        type: 'input',
        name: 'name',
        label: '应用名称',
        rules: [{
          required: true,
          message: '请输入小程序名称'
        }],
        labelCol: 6
      },
      {
        type: 'upload',
        name: 'logoUrl',
        label: '应用Logo',
        rules: [{
          required: true,
          message: '请上传应用Logo'
        }],
        upload: {
          regExp: imgRegExp,
          regMessage: '请上传图片文件!',
        },
        labelCol: 6
      },
      {
        type: 'upload',
        name: 'reviewImages',
        label: '应用效果图',
        rules: [{
          required: true,
          message: '请上传应用效果图'
        }],
        upload: {
          maxUpload: 3,
          regExp: imgRegExp,
          regMessage: '请上传图片文件!',
        },
        labelCol: 6
      },
      {
        type: 'textArea',
        name: 'describe',
        label: '应用描述',
        labelCol: 6
      }
    ];
    return (
      <FormPro
        ref={this.form}
        formList={formList}
      />
    )
  }
}

export default Edit;
